<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div style="color:red;background-color: yellow">盒子</div>
    <p class="red">这是一个op</p>
    <script>
        //获取div盒子
        var box = document.querySelector("div")
        var p = document.querySelector("p")
        // box.style.color = "springgreen"
        // box.style.backgroundColor = "skyblue"
        // box.style["background-color"] = "blue"

        //获取元素的样式
        // console.log(p.style.color);
        /* 获取元素的背景颜色
                当获取元素的样式的时候,
                    如果元素的样式是多个单词组成
                        1. 那么使用驼峰命名法
                        2. 使用中括号语法

        */
        // console.log(box.style.backgroundColor);
        // console.log(box.style["background-color"]);


        console.log(window.getComputedStyle(p).color);
    </script>
</body>
</html>